<template>
  <Submenu :name="props.menuList.id">
    <!--  父级菜单-->
    <template #title>
      <Icon :type="props.menuList.icon"></Icon>
      <span>{{ props.menuList.name }}</span>
    </template>
    <template v-for="item in props.menuList.child">
      <!--  若还有子集，则继续调用-->
      <MiddleMenu
          v-if="item.child && item.child.length!==0"
          :menu-list="item"
          :key="item.index">
      </MiddleMenu>
      <!--  子菜单-->
      <MenuItem v-else :name="item.path" @click="jumpUrl(item)">
        <Icon :type="item.icon"></Icon>
        <span>{{ item.name }}</span>
      </MenuItem>
    </template>
  </Submenu>
</template>

<script setup>
import router from "@/router";
import {commonStore} from "@/store/store";
const store = commonStore()

const props = defineProps({
  menuList: {
    type: Object,
    default: () => {
    }
  }
})

// 跳转菜单
const jumpUrl = (item) => {
  router.push({path: item.path})
  store.addTagsNavList({
    title: item.name,
    name: item.path.slice(1),
    path: item.path
  });
}
</script>

<style lang="less">
@import "../side-menu/side-menu.less";
</style>
